import React, { Component } from 'react'
import { Link, NavLink } from 'react-router-dom'
import Header from '../../components/Header/Header'

export default class Cate extends Component {
 
  render() {
    return (
      <div>
        {/*
          路由导航：
        1.Link NavLink
        2.编程式导航
          this.props.history.push(path) 添加一条新的历史记录
          this.props.history.replace(path) 用新的历史记录替换当前记录
          this.props.history.go(-1) 返回
          this.props.history.go(0) 刷新
        3.路由组件可以直接使用编程式导航，非路由组件需要通过withRouter()之后才能使用编程式导航
        4.像withRouter()这种函数，参数是一个组件，返回值是一个新组件，这个函数主要作用就是给组件增加了一些功能，这样的函数，叫HOC（高阶组件）
          */}
        <Header title="分类"></Header>
        {/* Link没有activeClassName，NavLink有 */}
        <Link to="/search">Link前往搜索</Link>
        <NavLink to="/search">NavLink前往搜索</NavLink>

        <button onClick={()=>{
         this.props.history.push("/search")
        }}>push搜索</button>
         <button onClick={()=>{
         this.props.history.replace("/search")
        }}>replace搜索</button>
      </div>
    )
  }
}
